<template>
    <div class="settle-sub-box patient" :class="{pd: optional}">
        <div class="head">
            <div @click="chooseImage('positive')">
                <i class="el-icon-camera"></i>
                拍摄身份证添加
            </div>
            <div @click="open()">
                <i class="el-icon-circle-plus-outline"></i>
                新增就诊人
            </div>
        </div>
        <div v-for="(list,index) in patientList" :key="index" class="list">
            <div class="check" :class="{hide: !optional}" @click="changeCheck(list)">
                <check-icon :value.sync="list.select"></check-icon>
            </div>
            <div class="info" @click="changeCheck(list, true)">
                <div class="name">{{list.name}} <span v-if="list.self" class="self">本人</span></div>
                <div class="id">{{list.cardId}}</div>
            </div>
            <div class="edit" v-if="!list.self" @click="open(list.userPatientId)"><i class="el-icon-edit-outline"></i>
            </div>
        </div>
        <el-button-group class="submit" v-if="optional">
            <div class="primary" @click="submit">确定</div>
        </el-button-group>
        <router-view @updateInfo="updateInfo"></router-view>
    </div>
</template>

<script>
    import {CheckIcon} from 'vux'

    export default {
        props: ['optional', 'parent', 'current'],
        data() {
            return {
                patientList: []
            }
        },
        mounted() {
            this.$method.wxConfig()
            this.getList()
        },
        methods: {
            getList() {
                this.$http.get('/userPatient/list').then(result => {
                    if (result.success) {
                        if (result.data.length > 0) {
                            result.data.forEach((e, index) => {
                                if (this.current) {
                                    if (e.userPatientId === this.current.userPatientId) {
                                        e.select = true
                                    } else {
                                        e.select = false
                                    }
                                } else {
                                    if (index === 0) {
                                        e.select = true
                                    } else {
                                        e.select = false
                                    }
                                }
                            })
                        }
                        this.patientList = result.data
                    }
                })
            },
            updateInfo() {
                this.getList()
            },
            submit() {
                let list = this.patientList.filter(e => {
                    if (e.select) return e
                })
                if (list.length > 0) {
                    window.$vm.$emit('changePatient', list[0])
                } else {
                    this.$vux.alert.show({
                        content: '请先选择就诊人'
                    })
                }
            },
            // 微信图片上传
            chooseImage(type) {
                let _this = this

                this.$wechat.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        _this.getLocalImgData(res.localIds[0], type)
                        _this.$vux.loading.show()
                    }
                })
            },
            getLocalImgData(localId, type) {
                let _this = this
                this.$wechat.getLocalImgData({
                    localId: localId, // 图片的本地ID
                    success: (res) => {
                        var localData = res.localData // localData是图片的base64数据，可以用img标签显示
                        if (localData.indexOf('data:image') !== 0) {
                            localData = 'data:image/jpg;base64,' + localData
                        }
                        let form = document.imgForm,
                            formData = new FormData(form),
                            fileName = new Date().getTime() + '.jpg'
                        formData.append('file', _this.$filter.dataURLtoFile(localData, fileName))
                        _this.fileUpload(formData, type)
                    },
                    fail: function () {
                        _this.$vux.loading.hide()
                    }
                })
            },
            fileUpload(formData, type) {
                this.$vux.loading.show()
                this.$nextTick(() => {
                    this.$http.post('/file/upload?type=idcard',
                        formData,
                        {headers: {'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryU9T56J8eIqTBGRQH'}}
                    ).then(result => {
                        if (result.success) {
                            this.$vux.loading.hide()
                            this.parseIdCard(result.data.uuid)
                            this.$nextTick(() => {
                                this.$previewRefresh()
                            })
                        }
                    }).catch(() => {
                        this.$vux.loading.hide()
                    })
                })
            },
            // 身份证上传相关
            parseIdCard(id) {
                this.$http.get('/healthcode/parseIdCard?fileId=' + id).then(result => {
                    if (result.success) {
                        this.$router.push({
                            name: this.parent ? this.parent + 'PatientDetail' : 'patientDetail',
                            params: {
                                idNumber: result.data.response[0].idnumber,
                                name: result.data.response[0].name
                            }
                        })
                    }
                })
            },
            open(id) {
                this.$router.push({
                    path: this.$route.path + (this.optional ? '/patient-detail' : '/detail'),
                    query: {
                        id: id
                    }
                })
            },
            changeCheck(list, invert) {
                if (this.optional) {
                    let select = invert ? !list.select : list.select
                    this.patientList.map(e => {
                        e.select = false
                    })
                    list.select = select
                }
            }
        },
        components: {
            CheckIcon
        }
    }
</script>

<style scoped lang="less">
    .patient {
        background-color: #f4f4f4;
        padding-bottom: .1rem;

        &.pd {
            padding-bottom: .98rem;
        }

        .head {
            background-color: #fff;
            display: flex;

            > div {
                flex: 1;
                margin: .2rem;
                background-color: #f4f4f4;
                border-radius: 10vw;
                text-align: center;
                line-height: .68rem;
                color: #4E94FE;
            }
        }

        /deep/ .list {
            display: flex;
            justify-items: center;
            align-items: center;
            padding: .15rem;
            background-color: #fff;
            border-bottom: 1px solid #eee;

            &:last-child {
                border-bottom: 0 none;
            }

            > div {
                padding: .1rem;
                width: 10%;
            }

            .check {
                .vux-check-icon {
                    .weui-icon {
                        font-size: .4rem;
                    }
                }
            }

            .edit {
                text-align: right;

                i {
                    font-size: .4rem;
                }
            }

            .info {
                width: 90%;

                .name {
                    display: flex;
                    justify-items: center;
                    align-items: center;
                    height: .48rem;
                    line-height: .48rem;
                    margin-bottom: .1rem;
                    font-weight: bolder;

                    .self {
                        display: inline-flex;
                        justify-items: center;
                        align-items: center;
                        height: .36rem;
                        line-height: 1;
                        font-size: 12px;
                        margin-left: .2rem;
                        padding: 0 .15rem;
                        border: .02rem solid #4E94FE;
                        border-radius: 3px;
                        color: #4E94FE;
                        font-weight: normal;
                    }
                }

                .id {
                    height: .4rem;
                    line-height: .4rem;
                    color: #666;
                }
            }

            .hide {
                display: none;
            }
        }

        .submit {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: .88rem;
            line-height: .88rem;
            z-index: 5;
            display: flex;

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                box-shadow: 0 0 5px 0px #b1b1b1;
                height: 1px;
                width: 100%;
                z-index: 0;
            }

            > div, .el-button {
                flex: 1;
                text-align: center;
                position: relative;
                z-index: 1;
                border-radius: 0 !important;
                border: 0 none;
            }

            .back {
                background-color: #fff;
            }

            .primary {
                color: #fff;
                background-color: #6D97FF;
            }
        }
    }
</style>
